<template>
  <Box style="margin-top: 10px">
    <div class="caption">
      <img class="caption-img" src="@/assets/img/icon-circle.png" alt="" />
      <div class="caption-title">
        {{ isBuildGroup ? '下级单位项目合同数据' : '项目部合同数据' }}
      </div>
    </div>
    <div class="list-header">
      <span>施工单位</span>
      <span>标段项目</span>
      <span>合同金额(万)</span>
    </div>
    <ScrollBoard v-if="list.length" class="collection">
      <div class="list">
        <div class="item" :key="index" v-for="(item, index) in list">
          <span :title="item.projectName">
            {{ item.projectName }}
          </span>
          <span :title="item.subsidiaryName">
            {{ item.subsidiaryName }}
          </span>
          <span>
            {{ item.contractAmount }}
          </span>
        </div>
      </div>
    </ScrollBoard>
    <div v-else class="collection">
      <div class="emptyImg"><img src="@/assets/data-empty.png" /></div>
    </div>
  </Box>
</template>

<script setup lang="ts">
import Box from '@/components/Box.vue'
import { ref } from 'vue'
import ScrollBoard from '@/components/ScrollBoard.vue'
import { getProjectContract } from '@/api'
import useInterval from '@/hooks/useInterval'
import config from '@/utils/config'
import { useAccountStore } from '@/stores/userInfo'
const { isBuildGroup } = useAccountStore()

const list: any = ref({})

useInterval(() => {
  getProjectContract({}).then((res) => {
    list.value = res
  })
}, config.internalTime)
</script>

<style lang="scss" scoped>
.caption {
  align-items: center;
  display: flex;
  height: 24px;

  .caption-img {
    width: 20px;
    height: 20px;
  }

  .caption-title {
    display: flex;
    flex: 1;
    font-size: 18px;
    align-items: center;
    padding-left: 12px;
    font-weight: bold;
    // 渐变色
    // background: linear-gradient(90deg, #a6e6f6, #00b3ff);
    color: #a6e6f6;
    .num {
      margin-left: 10px;
      color: yellow;
      font-weight: bold;
      font-size: 20px;
      .tag {
        font-size: 12px;
      }
    }
  }
}

.collection {
  width: 100%;
  height: 510px;
  overflow: hidden;
  .list {
    // 表格
    .item {
      display: flex;
      align-items: center;
      padding: 0 0px;
      border: 1px solid rgba(255, 255, 255, 0.1);
      span {
        flex: 1;
        border-right: 1px solid rgba(255, 255, 255, 0.1);
        padding: 0 6px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: #a6e6f6;
      }
      span:first-child {
        flex: 1;
      }
      span:last-child {
        border-right: none;
        flex: 0.8;
      }
    }
  }
}
.list-header {
  display: flex;
  align-items: center;
  padding: 0 0px;
  margin-top: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  span {
    flex: 1;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    padding: 0 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #a6e6f6;
    background-color: #132476;
  }
  span:first-child {
    flex: 1;
  }
  span:last-child {
    border-right: none;
    flex: 0.8;
  }
}
.info {
  position: relative;
  display: flex;
  justify-content: space-between;
  margin: 10px 0;
  &-item {
    font-weight: bold;
    font-size: 14px;
    display: flex;
    flex-direction: column;
    color: #c0f2ff;

    .tit {
      font-weight: 600;
      color: #a6e6f6af;
    }
    .num {
      font-weight: 600;
      font-size: 14px;
      .tag {
        font-size: 14px;
      }
    }
  }
}
</style>
